<!--
 * @Author: 小花
 * @Date: 2022-05-22 20:31:28
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-25 01:41:56
 * @FilePath: /permission_client/src/components/IconList.vue
 * @Description: 图标组件
-->
<template>
  <el-dialog v-model="dialogIconVisible" title="图标" :before-close="beforeClose">
    <el-link type="primary" href="https://fontawesome.com/search?m=free&s=solid" target="_blank">在线查找</el-link>
    <el-input v-model="searchValue" class="searchInput" placeholder="搜索" clearable />
    <div class="iconBox" shadow="never">
      <el-card shadow="never" v-for="item in pageFas" :key="item" @click="selectIcon(item)">
        <font-awesome-icon :icon="fas[item].iconName" />
        <span> {{ fas[item].iconName }} </span>
      </el-card>
    </div>
    <el-pagination @size-change="(val: number) => pagination.pageSize = val"
      @current-change="(val: number) => pagination.currentPage = val" :current-page="pagination.currentPage"
      :pager-count="pagination.pagerCount" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" background>
    </el-pagination>
  </el-dialog>
</template>

<script lang='ts'>
import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { DialogBeforeCloseFn } from 'element-plus'

export default defineComponent({
  name: 'IconList',

  /**
   * @description: 获取父组件传递回调方法
   * @param {*}
   * @return {*}
   */
  emits: ['selectIconValue'],
  setup (props, ctx) {
    // 控制对话框显示/隐藏
    const dialogIconVisible = ref(true)
    // 搜索框的值
    const searchValue = ref('')
    // 分布数据 默认 4列 * 7行
    const coreData = reactive({
      pagination: {
        pageSize: 4 * 7,
        pageSizes: [4 * 7, 4 * 15, 4 * 20, 4 * 30],
        pagerCount: 5,
        currentPage: 1,
        total: Object.keys(fas).length
      }
    })

    /**
     * @description: 分页
     * @param {*} computed
     * @return {*}
     */
    const pageFas = computed(() => {
      const filter = Object.keys(fas).filter(item => fas[item].iconName.toUpperCase().includes(searchValue.value.toUpperCase()))
      return filter.slice((coreData.pagination.currentPage - 1) * coreData.pagination.pageSize, coreData.pagination.currentPage * coreData.pagination.pageSize)
    })

    /**
     * @description: 关闭对话框
     * @param {*} done
     * @return {*}
     */
    const beforeClose: DialogBeforeCloseFn = (done) => {
      ctx.emit('selectIconValue', '')
      done()
    }

    /**
     * @description: 选择图标，传递值到父组件
     * @param {*} icon
     * @return {*}
     */
    const selectIcon = (icon: string) => {
      ctx.emit('selectIconValue', fas[icon].iconName)
    }

    return {
      fas,
      dialogIconVisible,
      ...toRefs(coreData),
      pageFas,
      searchValue,
      selectIcon,
      beforeClose
    }
  }
})
</script>

<style lang='scss' scoped>
.searchInput {
  margin-bottom: 1rem;
}

.iconBox {

  .el-card {
    width: 10rem;
    height: 3.2rem;
    display: inline-block;
    margin: 0 5px 5px 0;
    cursor: pointer;

    &:hover {
      background-color: #ECB463;
    }

    :deep(.el-card__body) {
      padding: 0.5rem;
      height: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;

      svg {
        margin-right: 0.5rem;
        font-size: 1.3rem;
      }

      span {
        font-size: 12px;
      }
    }
  }
}
</style>
